/**
 * Transform控制面板管理器
 * 用于显示和编辑选中节点的Transform属性（位置、旋转、缩放）
 */

import * as THREE from 'three';

export class TransformPanel {
    constructor() {
        this.panel = document.getElementById('transform-panel');
        this.nodeNameElement = document.getElementById('transform-node-name');
        this.componentsContainer = document.getElementById('components-container');
        
        // 节点操作按钮（标题栏中，保留用于兼容）
        this.nodeRenameBtn = document.getElementById('node-rename-btn');
        this.nodeVisibleBtn = document.getElementById('node-visible-btn');
        this.nodeDeleteBtn = document.getElementById('node-delete-btn');
        this.nodeActionsGroup = document.getElementById('node-actions-group');
        
        // 节点操作按钮（Transform上方的主按钮）
        this.nodeVisibleBtnMain = document.getElementById('node-visible-btn-main');
        this.nodeDeleteBtnMain = document.getElementById('node-delete-btn-main');
        
        // 输入框元素
        this.inputs = {
            posX: document.getElementById('transform-pos-x'),
            posY: document.getElementById('transform-pos-y'),
            posZ: document.getElementById('transform-pos-z'),
            rotX: document.getElementById('transform-rot-x'),
            rotY: document.getElementById('transform-rot-y'),
            rotZ: document.getElementById('transform-rot-z'),
            scaleX: document.getElementById('transform-scale-x'),
            scaleY: document.getElementById('transform-scale-y'),
            scaleZ: document.getElementById('transform-scale-z')
        };
        
        this.currentNode = null; // 当前编辑的节点
        this.treeManager = null; // 场景树管理器引用
        this.sceneTreeUI = null; // 场景树UI引用
        
        this.setupEventListeners();
        this.setupComponentManagement();
    }
    
    /**
     * 设置组件管理
     */
    setupComponentManagement() {
        // 组件模板定义
        this.componentTemplates = {
            model: {
                icon: '🎨',
                title: '模型',
                render: (node, componentData) => this.renderModelComponent(node, componentData)
            },
            light: {
                icon: '💡',
                title: '灯光',
                render: (node, componentData) => this.renderLightComponent(node, componentData)
            },
            particle: {
                icon: '✨',
                title: '粒子特效',
                render: (node, componentData) => this.renderParticleComponent(node, componentData)
            },
            ui3d: {
                icon: '🖼️',
                title: '3D UI',
                render: (node, componentData) => this.renderUI3DComponent(node, componentData)
            }
        };
    }
    
    /**
     * 设置场景树管理器引用
     */
    setTreeManager(treeManager, sceneTreeUI) {
        this.treeManager = treeManager;
        this.sceneTreeUI = sceneTreeUI;
    }
    
    /**
     * 设置事件监听器
     */
    setupEventListeners() {
        // Position输入框
        this.inputs.posX.addEventListener('input', () => this.onTransformChanged('position', 'x'));
        this.inputs.posY.addEventListener('input', () => this.onTransformChanged('position', 'y'));
        this.inputs.posZ.addEventListener('input', () => this.onTransformChanged('position', 'z'));
        
        // Rotation输入框（角度 -> 弧度）
        this.inputs.rotX.addEventListener('input', () => this.onTransformChanged('rotation', 'x'));
        this.inputs.rotY.addEventListener('input', () => this.onTransformChanged('rotation', 'y'));
        this.inputs.rotZ.addEventListener('input', () => this.onTransformChanged('rotation', 'z'));
        
        // Scale输入框
        this.inputs.scaleX.addEventListener('input', () => this.onTransformChanged('scale', 'x'));
        this.inputs.scaleY.addEventListener('input', () => this.onTransformChanged('scale', 'y'));
        this.inputs.scaleZ.addEventListener('input', () => this.onTransformChanged('scale', 'z'));
        
        // 节点操作按钮（标题栏中的按钮）
        if (this.nodeRenameBtn) {
            this.nodeRenameBtn.addEventListener('click', () => this.onRenameNode());
        }
        if (this.nodeVisibleBtn) {
            this.nodeVisibleBtn.addEventListener('click', () => this.onToggleVisibility());
        }
        if (this.nodeDeleteBtn) {
            this.nodeDeleteBtn.addEventListener('click', () => this.onDeleteNode());
        }
        
        // 节点操作按钮（Transform上方的主按钮）
        if (this.nodeVisibleBtnMain) {
            this.nodeVisibleBtnMain.addEventListener('click', () => this.onToggleVisibility());
        }
        if (this.nodeDeleteBtnMain) {
            this.nodeDeleteBtnMain.addEventListener('click', () => this.onDeleteNode());
        }
        
        // 名称输入框 - 点击时启用编辑（环境节点除外）
        this.nodeNameElement.addEventListener('click', () => {
            if (this.currentNode && this.currentNode.id !== 'root' && 
                this.currentNode.id !== 'environment' && this.currentNode.type !== 'environment') {
                this.enableNameEdit();
            }
        });
    }
    
    /**
     * Transform值改变时的处理
     * ✅ 接收本地坐标，通过 updateTransform 转换为世界坐标保存
     */
    onTransformChanged(type, axis) {
        if (!this.currentNode) return;
        
        let inputKey;
        if (type === 'position') {
            inputKey = `pos${axis.toUpperCase()}`;
        } else if (type === 'rotation') {
            inputKey = `rot${axis.toUpperCase()}`;
        } else if (type === 'scale') {
            inputKey = `scale${axis.toUpperCase()}`;
        }
        
        const input = this.inputs[inputKey];
        let value = parseFloat(input.value);
        
        if (isNaN(value)) return;
        
        // 如果是旋转，需要将角度转换为弧度
        if (type === 'rotation') {
            value = value * Math.PI / 180;
        }
        
        // 如果是缩放，限制最小值
        if (type === 'scale' && value <= 0) {
            value = 0.001;
            input.value = value.toFixed(3);
        }
        
        // ✅ 对于缩放，直接设置世界缩放，而不是本地缩放
        if (type === 'scale' && this.currentNode.object3D) {
            const importScale = this.currentNode.object3D.userData?.importScale || 1.0;
            
            // 1. 获取当前世界缩放
            const worldScale = new THREE.Vector3();
            this.currentNode.object3D.getWorldScale(worldScale);
            
            // 2. 用户输入是"世界用户缩放"，转换为"世界物理缩放"
            const targetWorldPhysicalScale = value * importScale;
            
            // 3. 更新指定轴的世界物理缩放
            worldScale[axis] = targetWorldPhysicalScale;
            
            // 4. 计算需要的本地物理缩放
            // 本地物理缩放 = 世界物理缩放 / 父世界物理缩放
            const parent = this.currentNode.object3D.parent;
            if (parent) {
                const parentWorldScale = new THREE.Vector3();
                parent.getWorldScale(parentWorldScale);
                
                this.currentNode.object3D.scale[axis] = worldScale[axis] / parentWorldScale[axis];
            } else {
                // 没有父节点，世界缩放 = 本地缩放
                this.currentNode.object3D.scale[axis] = worldScale[axis];
            }
            
            // 5. 更新世界矩阵并保存 transform
            this.currentNode.object3D.updateMatrixWorld(true);
            
            // 6. 从 object3D 获取世界坐标并保存
            const worldPos = new THREE.Vector3();
            const worldQuat = new THREE.Quaternion();
            const finalWorldScale = new THREE.Vector3();
            
            this.currentNode.object3D.getWorldPosition(worldPos);
            this.currentNode.object3D.getWorldQuaternion(worldQuat);
            this.currentNode.object3D.getWorldScale(finalWorldScale);
            
            const worldEuler = new THREE.Euler().setFromQuaternion(worldQuat);
            
            this.currentNode.transform = {
                position: { x: worldPos.x, y: worldPos.y, z: worldPos.z },
                rotation: { x: worldEuler.x, y: worldEuler.y, z: worldEuler.z },
                scale: { x: finalWorldScale.x, y: finalWorldScale.y, z: finalWorldScale.z }
            };
        } else {
            // 对于位置和旋转，使用原来的逻辑
            const localTransform = this.currentNode.getLocalTransform();
            localTransform[type][axis] = value;
            this.currentNode.updateTransform(localTransform);
        }
        
        // 触发保存
        if (this.sceneTreeUI) {
            this.sceneTreeUI.notifyTreeChanged();
        }
    }
    
    /**
     * 显示Transform面板并更新为选中节点的值
     * 注意：不再直接控制面板显示/隐藏，由RightToolbarManager统一管理
     */
    async show(node) {
        if (!node || node.id === 'root') {
            this.hide();
            return;
        }
        
        this.currentNode = node;
        
        // 更新节点名称
        if (this.nodeNameElement) {
            // 节点名称现在是 input 元素
            if (this.nodeNameElement.tagName === 'INPUT') {
                // 🔒 如果正在编辑模式，不要覆盖输入框的值和状态
                if (this.nodeNameElement.readOnly) {
                    this.nodeNameElement.value = node.name;
                    this.nodeNameElement.readOnly = true; // 默认只读，点击后可编辑
                }
                // 如果正在编辑（!readOnly），保持编辑状态，不覆盖
            } else {
                this.nodeNameElement.textContent = node.name;
            }
        }
        
        // 更新节点操作按钮的显示
        this.updateNodeActionButtons(node);
        
        // 更新主按钮的图标和文本
        this.updateMainActionButtons(node);
        
        // 更新输入框的值
        this.updateInputValues();
        
        // 渲染节点的组件
        await this.renderComponents(node);
        
        // ✨ 环境节点：隐藏"添加组件"按钮
        this.updateAddComponentButton(node);
        
        // 不再直接操作 display 样式，交由 RightToolbarManager 管理
        // this.panel.style.display = 'block';
    }
    
    /**
     * 渲染节点的所有组件
     */
    async renderComponents(node) {
        if (!this.componentsContainer) return;
        
        // 清空容器
        this.componentsContainer.innerHTML = '';
        
        // 确保节点有 components 数组
        if (!node.components) {
            node.components = [];
        }
        
        // 兼容旧数据：如果是模型节点但没有模型组件，自动添加并保存
        if (node.type === 'model' && !node.components.find(c => c.type === 'model')) {
            // ✅ 从组件中获取 modelId（如果没有组件，从旧的 node.modelId 读取）
            const modelId = node.components.find(c => c.type === 'model')?.modelId || node.modelId || null;
            
            node.components.push({
                type: 'model',
                modelId: modelId,
                modelName: node.name
            });
            
            // 保存到场景树数据
            if (this.sceneTreeManager) {
                this.sceneTreeManager.updateNode(node.id, node);
                // 触发保存
                document.dispatchEvent(new CustomEvent('sceneTreeChanged'));
            }
        }
        
        // 渲染每个组件
        node.components.forEach((component, index) => {
            const template = this.componentTemplates[component.type];
            if (template) {
                const componentHtml = template.render(node, component);
                this.componentsContainer.insertAdjacentHTML('beforeend', componentHtml);
            }
        });
    }
    
    /**
     * 渲染模型组件
     */
    renderModelComponent(node, componentData) {
        const modelName = componentData.modelName || componentData.modelId || '无';
        const modelId = componentData.modelId;
        const fileName = node.object3D?.name || '-';
        
        // 🔒 检查是否为只读组件（来自节点组模型）
        const isReadonly = componentData.readonly === true;
        const removeBtn = isReadonly 
            ? '' // 只读组件不显示删除按钮
            : '<button class="component-remove-btn" onclick="event.stopPropagation(); removeComponentFromNode(\'model\')" title="移除组件">✕</button>';
        
        return `
            <div class="inspector-section" data-component-type="model">
                <div class="section-header" onclick="toggleInspectorSection(event, 'component-model')">
                    <span class="section-icon">▼</span>
                    <span class="section-title">🎨 模型${isReadonly ? ' 🔒' : ''}</span>
                    <div class="section-actions">
                        ${removeBtn}
                    </div>
                </div>
                <div class="section-content" id="section-component-model">
                    <div class="property-row">
                        <label class="property-label">资源</label>
                        <div class="property-values">
                            <div class="resource-ref">
                                <span class="resource-name">${modelName}</span>
                            </div>
                        </div>
                    </div>
                    <div class="property-row">
                        <label class="property-label">文件</label>
                        <div class="property-values">
                            <span class="resource-info">${fileName}</span>
                        </div>
                    </div>
                    ${isReadonly ? '<div class="property-row"><div class="property-values"><span style="color: #999; font-size: 12px;">📌 此组件来自节点组模型，不可删除或更换</span></div></div>' : ''}
                </div>
            </div>
        `;
    }
    
    
    /**
     * 渲染灯光组件
     */
    renderLightComponent(node, componentData) {
        return `
            <div class="inspector-section" data-component-type="light">
                <div class="section-header" onclick="toggleInspectorSection(event, 'component-light')">
                    <span class="section-icon">▼</span>
                    <span class="section-title">💡 灯光</span>
                    <div class="section-actions">
                        <button class="component-remove-btn" onclick="event.stopPropagation(); removeComponentFromNode('light')" title="移除组件">✕</button>
                    </div>
                </div>
                <div class="section-content" id="section-component-light">
                    <div class="property-placeholder">
                        🚧 灯光组件开发中...
                    </div>
                </div>
            </div>
        `;
    }
    
    /**
     * 渲染粒子特效组件
     */
    renderParticleComponent(node, componentData) {
        return `
            <div class="inspector-section" data-component-type="particle">
                <div class="section-header" onclick="toggleInspectorSection(event, 'component-particle')">
                    <span class="section-icon">▼</span>
                    <span class="section-title">✨ 粒子特效</span>
                    <div class="section-actions">
                        <button class="component-remove-btn" onclick="event.stopPropagation(); removeComponentFromNode('particle')" title="移除组件">✕</button>
                    </div>
                </div>
                <div class="section-content" id="section-component-particle">
                    <div class="property-placeholder">
                        🚧 粒子特效组件开发中...
                    </div>
                </div>
            </div>
        `;
    }
    
    /**
     * 渲染 3D UI 组件
     */
    renderUI3DComponent(node, componentData) {
        return `
            <div class="inspector-section" data-component-type="ui3d">
                <div class="section-header" onclick="toggleInspectorSection(event, 'component-ui3d')">
                    <span class="section-icon">▼</span>
                    <span class="section-title">🖼️ 3D UI</span>
                    <div class="section-actions">
                        <button class="component-remove-btn" onclick="event.stopPropagation(); removeComponentFromNode('ui3d')" title="移除组件">✕</button>
                    </div>
                </div>
                <div class="section-content" id="section-component-ui3d">
                    <div class="property-placeholder">
                        🚧 3D UI 组件开发中...
                    </div>
                </div>
            </div>
        `;
    }
    
    /**
     * 添加组件到当前节点
     */
    addComponent(componentType) {
        if (!this.currentNode) {
            console.warn('没有选中节点');
            return;
        }
        
        // 确保节点有 components 数组
        if (!this.currentNode.components) {
            this.currentNode.components = [];
        }
        
        // 检查是否已经有该类型的组件
        if (this.currentNode.components.find(c => c.type === componentType)) {
            console.warn(`节点已有 ${componentType} 组件`);
            return;
        }
        
        // 创建新组件
        const newComponent = {
            type: componentType
        };
        
        // 根据组件类型初始化数据
        if (componentType === 'model') {
            newComponent.modelId = null;
            newComponent.modelPath = null;
        }
        
        // 添加组件
        this.currentNode.components.push(newComponent);
        
        // 重新渲染组件
        this.renderComponents(this.currentNode);
        
        // 通知树管理器数据已更改
        if (this.treeManager) {
            this.treeManager.updateNode(this.currentNode.id, this.currentNode);
        }
        
        // 触发保存
        if (this.sceneTreeUI) {
            this.sceneTreeUI.notifyTreeChanged();
        }
    }
    
    /**
     * 从当前节点移除组件
     */
    async removeComponent(componentType) {
        if (!this.currentNode || !this.currentNode.components) {
            return;
        }
        
        // 保存节点名称（因为后续可能取消选择导致 currentNode 变为 null）
        const nodeName = this.currentNode.name;
        
        // 查找组件
        const index = this.currentNode.components.findIndex(c => c.type === componentType);
        if (index !== -1) {
            const component = this.currentNode.components[index];
            
            // 🔒 检查是否为只读组件（来自节点组模型）
            if (component.readonly === true) {
                console.warn('⚠️ 无法删除只读组件（来自节点组模型）');
                if (window.showMessage) {
                    window.showMessage('此组件来自节点组模型，不可删除', 'warning');
                }
                return;
            }
            
            // 如果是模型组件，需要特殊处理
            if (componentType === 'model') {
                await this.removeModelFromNode(this.currentNode);
                
                // 🔄 移除模型组件时，如果当前处于mesh编辑模式，需要退出
                if (this.sceneTreeUI) {
                    const meshPanel = document.getElementById('mesh-structure-panel');
                    if (meshPanel && meshPanel.classList.contains('active')) {
                        this.sceneTreeUI.exitMeshEditMode();
                    }
                }
            }
            
            // 移除组件数据
            this.currentNode.components.splice(index, 1);
            
            // 重新渲染组件
            this.renderComponents(this.currentNode);
            
            // 通知树管理器数据已更改
            if (this.treeManager) {
                this.treeManager.updateNode(this.currentNode.id, this.currentNode);
            }
            
            // ✅ 注意：删除模型组件后，节点会自动创建空 Group，保持选中状态
            // 不再需要取消选择节点
            
            // 刷新场景树UI显示（更新节点图标）
            if (this.sceneTreeUI) {
                this.sceneTreeUI.render();
                this.sceneTreeUI.notifyTreeChanged();
            }
            
            // 使用保存的节点名称输出日志
        }
    }
    
    /**
     * 从节点移除模型（清理 Three.js 对象）
     */
    async removeModelFromNode(node) {
        if (!node.object3D) {
            return;
        }
        // 0. 如果 TransformControls 附加到此对象，先分离
        if (window.transformControlsManager) {
            const currentAttached = window.transformControlsManager.getAttachedObject();
            if (currentAttached === node.object3D) {
                window.transformControlsManager.detach();
            } else if (currentAttached) {
                // 即使不是同一个对象，也尝试分离（可能是引用问题）
                window.transformControlsManager.detach();
            }
        } else {
            console.warn(`⚠️ transformControlsManager 未找到`);
        }
        
        // 1. 保存父节点引用和场景树子节点
        const parentObject = node.object3D.parent;
        const treeChildren = node.children; // 场景树中的子节点（TreeNode）
        
        // 2. 如果有场景树子节点，需要先将它们的 object3D 从当前节点移除
        //    这样在删除模型对象时不会误删子节点的对象
        const childrenObject3Ds = [];
        if (treeChildren && treeChildren.length > 0) {
            treeChildren.forEach(child => {
                if (child.object3D && child.object3D.parent === node.object3D) {
                    childrenObject3Ds.push(child.object3D);
                    node.object3D.remove(child.object3D);
                }
            });
        }
        
        // 3. 递归释放模型的所有子对象资源（现在不包括场景树子节点的对象）
        await this.disposeObject3D(node.object3D);
        
        // 4. 从父节点中移除对象
        if (parentObject) {
            parentObject.remove(node.object3D);
        }
        
        // 5. 创建空的 Group 对象替代模型
        const emptyGroup = new THREE.Group();
        emptyGroup.name = node.name;
        emptyGroup.uuid = node.id; // 保持 ID 一致
        
        // 应用节点的 Transform 数据
        if (node.transform) {
            const t = node.transform;
            if (t.position) {
                emptyGroup.position.set(
                    t.position.x || 0,
                    t.position.y || 0,
                    t.position.z || 0
                );
            }
            if (t.rotation) {
                emptyGroup.rotation.set(
                    t.rotation.x || 0,
                    t.rotation.y || 0,
                    t.rotation.z || 0
                );
            }
            if (t.scale) {
                emptyGroup.scale.set(
                    t.scale.x || 1,
                    t.scale.y || 1,
                    t.scale.z || 1
                );
            }
        }
        
        // 将空 Group 添加到父对象
        if (parentObject) {
            parentObject.add(emptyGroup);
        }
        
        // 更新节点的 object3D 引用
        node.object3D = emptyGroup;
        
        // 6. 将子节点的 object3D 重新添加到空 Group（保持层级关系）
        if (childrenObject3Ds.length > 0) {
            childrenObject3Ds.forEach(childObj => {
                emptyGroup.add(childObj);
            });
        }
        
        // 7. 如果节点有模型相关的类型，改为 empty
        // 支持的模型类型：model, Group, mesh, Mesh 等
        if (node.type && node.type.toLowerCase() !== 'empty' && node.type !== 'root') {
            const oldType = node.type;
            node.type = 'empty';
        }
        
        // 8. 如果节点仍然被选中，重新附加 TransformControls
        if (this.treeManager && this.treeManager.selectedNode === node) {
            const currentScene = window.manager?.getCurrentScene();
            if (currentScene && currentScene.transformControlsManager) {
                currentScene.transformControlsManager.attach(emptyGroup);
            }
        }
        
        // 9. 检查mesh结构面板，如果正在显示该节点，退出mesh编辑模式
        if (window.sceneTreeUI) {
            const meshPanel = document.getElementById('mesh-structure-panel');
            if (meshPanel && meshPanel.classList.contains('active')) {
                // 检查mesh面板是否显示的是当前节点
                if (window.sceneTreeUI._previousNode === node) {
                    window.sceneTreeUI.exitMeshEditMode();
                }
            }
        }
    }
    
    /**
     * 递归释放 Three.js 对象及其所有子对象的资源
     */
    async disposeObject3D(object) {
        if (!object) return;
        
        // 递归处理所有子对象
        if (object.children && object.children.length > 0) {
            for (const child of [...object.children]) {
                await this.disposeObject3D(child);
            }
        }
        
        // 释放几何体
        if (object.geometry) {
            object.geometry.dispose();
        }
        
        // ⭐⭐ 释放材质之前先移除材质引用记录
        if (object.material && object.isMesh) {
            // 查找mesh所属的节点
            const node = this.findNodeByObject(object);
            if (node) {
                const sceneId = window.manager?.getCurrentSceneName() || 'unknown';
                
                if (Array.isArray(object.material)) {
                    for (const material of object.material) {
                        // 移除材质引用
                        await this.removeMaterialUsageForMesh(material, sceneId, node.id, object.uuid);
                        // 释放材质资源
                        this.disposeMaterial(material);
                    }
                } else {
                    // 移除材质引用
                    await this.removeMaterialUsageForMesh(object.material, sceneId, node.id, object.uuid);
                    // 释放材质资源
                    this.disposeMaterial(object.material);
                }
            } else {
                // 找不到节点，只释放资源
                if (Array.isArray(object.material)) {
                    object.material.forEach(material => {
                        this.disposeMaterial(material);
                    });
                } else {
                    this.disposeMaterial(object.material);
                }
            }
        } else if (object.material) {
            // 非mesh对象，直接释放材质
            if (Array.isArray(object.material)) {
                object.material.forEach(material => {
                    this.disposeMaterial(material);
                });
            } else {
                this.disposeMaterial(object.material);
            }
        }
        
        // 释放纹理
        if (object.texture) {
            object.texture.dispose();
        }
    }
    
    /**
     * 释放材质及其纹理资源
     */
    disposeMaterial(material) {
        if (!material) return;
        
        // 释放材质的所有纹理
        const textureProperties = [
            'map', 'lightMap', 'bumpMap', 'normalMap', 'specularMap',
            'envMap', 'alphaMap', 'aoMap', 'displacementMap', 'emissiveMap',
            'gradientMap', 'metalnessMap', 'roughnessMap'
        ];
        
        textureProperties.forEach(prop => {
            if (material[prop]) {
                material[prop].dispose();
            }
        });
        
        // 释放材质本身
        material.dispose();
    }
    
    /**
     * 隐藏Transform面板
     * 注意：不再直接控制面板显示/隐藏，由RightToolbarManager统一管理
     */
    hide() {
        // 不再直接操作 display 样式，交给 RightToolbarManager 管理
        // this.panel.style.display = 'none';
        this.currentNode = null;
    }
    
    /**
     * 更新输入框的值
     */
    /**
     * 更新输入框显示的值
     * ✅ 显示本地坐标（相对父节点），而不是世界坐标
     */
    updateInputValues() {
        if (!this.currentNode) return;
        
        // ✅ 获取本地坐标（相对父节点）
        const t = this.currentNode.getLocalTransform();
        
        // Position
        this.inputs.posX.value = t.position.x.toFixed(3);
        this.inputs.posY.value = t.position.y.toFixed(3);
        this.inputs.posZ.value = t.position.z.toFixed(3);
        
        // Rotation（弧度 -> 角度）
        this.inputs.rotX.value = (t.rotation.x * 180 / Math.PI).toFixed(1);
        this.inputs.rotY.value = (t.rotation.y * 180 / Math.PI).toFixed(1);
        this.inputs.rotZ.value = (t.rotation.z * 180 / Math.PI).toFixed(1);
        
        // ✅ Scale - 显示"世界用户缩放"（世界物理缩放 ÷ importScale）
        // ⚠️ 关键修复：必须用世界缩放，不能用本地缩放！
        // 因为本地物理缩放会受父节点影响，导致显示错误
        const importScale = this.currentNode.object3D?.userData?.importScale || 1.0;
        
        if (this.currentNode.object3D) {
            // 获取世界物理缩放
            const worldScale = new THREE.Vector3();
            this.currentNode.object3D.getWorldScale(worldScale);
            
            // 世界用户缩放 = 世界物理缩放 ÷ importScale
            this.inputs.scaleX.value = (worldScale.x / importScale).toFixed(3);
            this.inputs.scaleY.value = (worldScale.y / importScale).toFixed(3);
            this.inputs.scaleZ.value = (worldScale.z / importScale).toFixed(3);
        } else {
            // 如果没有 object3D，使用默认值
            this.inputs.scaleX.value = '1.000';
            this.inputs.scaleY.value = '1.000';
            this.inputs.scaleZ.value = '1.000';
        }
    }
    
    /**
     * 重置Transform为默认值
     */
    reset() {
        if (!this.currentNode) return;
        
        this.currentNode.transform = {
            position: { x: 0, y: 0, z: 0 },
            rotation: { x: 0, y: 0, z: 0 },
            scale: { x: 1, y: 1, z: 1 }
        };
        
        this.currentNode.applyTransformToObject3D();
        this.updateInputValues();
        
        // 触发保存
        if (this.sceneTreeUI) {
            this.sceneTreeUI.notifyTreeChanged();
        }
    }
    
    /**
     * 更新节点操作按钮的显示
     */
    updateNodeActionButtons(node) {
        if (!node || node.id === 'root') {
            // 隐藏所有按钮
            if (this.nodeRenameBtn) this.nodeRenameBtn.style.display = 'none';
            if (this.nodeActionsGroup) this.nodeActionsGroup.style.display = 'none';
            return;
        }
        
        // ✨ 隐藏重命名按钮（所有节点都不显示）
        if (this.nodeRenameBtn) {
            this.nodeRenameBtn.style.display = 'none';
        }
        
        // 显示操作按钮组
        if (this.nodeActionsGroup) {
            this.nodeActionsGroup.style.display = 'flex';
        }
        
        // 更新可见性按钮图标
        if (this.nodeVisibleBtn) {
            this.nodeVisibleBtn.textContent = node.visible ? '👁' : '👁‍🗨';
            this.nodeVisibleBtn.title = node.visible ? '隐藏' : '显示';
        }
        
        // ✨ 环境节点：禁用删除按钮
        if (this.nodeDeleteBtn) {
            if (node.id === 'environment' || node.type === 'environment') {
                this.nodeDeleteBtn.disabled = true;
                this.nodeDeleteBtn.style.opacity = '0.3';
                this.nodeDeleteBtn.style.cursor = 'not-allowed';
                this.nodeDeleteBtn.title = '环境节点不能删除';
            } else {
                this.nodeDeleteBtn.disabled = false;
                this.nodeDeleteBtn.style.opacity = '1';
                this.nodeDeleteBtn.style.cursor = 'pointer';
                this.nodeDeleteBtn.title = '删除';
            }
        }
    }
    
    /**
     * 更新Transform上方的主操作按钮
     */
    updateMainActionButtons(node) {
        if (!node || node.id === 'root') {
            return;
        }
        
        // 更新可见性按钮
        if (this.nodeVisibleBtnMain) {
            const icon = this.nodeVisibleBtnMain.querySelector('.btn-icon');
            const label = this.nodeVisibleBtnMain.querySelector('.btn-label');
            if (icon) icon.textContent = node.visible ? '👁' : '👁‍🗨';
            if (label) label.textContent = node.visible ? '可见性' : '已隐藏';
            this.nodeVisibleBtnMain.title = node.visible ? '隐藏' : '显示';
        }
        
        // ✨ 环境节点：禁用主删除按钮
        if (this.nodeDeleteBtnMain) {
            if (node.id === 'environment' || node.type === 'environment') {
                this.nodeDeleteBtnMain.disabled = true;
                this.nodeDeleteBtnMain.style.opacity = '0.3';
                this.nodeDeleteBtnMain.style.cursor = 'not-allowed';
                this.nodeDeleteBtnMain.title = '环境节点不能删除';
            } else {
                this.nodeDeleteBtnMain.disabled = false;
                this.nodeDeleteBtnMain.style.opacity = '1';
                this.nodeDeleteBtnMain.style.cursor = 'pointer';
                this.nodeDeleteBtnMain.title = '删除节点';
            }
        }
    }
    
    /**
     * 更新"添加组件"按钮的显示状态
     */
    updateAddComponentButton(node) {
        const addComponentSection = document.querySelector('.add-component-section');
        if (!addComponentSection) return;
        
        // ✨ 环境节点：隐藏"添加组件"按钮
        if (node.id === 'environment' || node.type === 'environment') {
            addComponentSection.style.display = 'none';
        } else {
            addComponentSection.style.display = 'block';
        }
    }
    
    /**
     * 启用名称编辑
     */
    enableNameEdit() {
        if (!this.currentNode || this.currentNode.id === 'root') return;
        
        // ✨ 环境节点不能重命名
        if (this.currentNode.id === 'environment' || this.currentNode.type === 'environment') return;
        
        // 如果已经在编辑模式，不要重复绑定
        if (!this.nodeNameElement.readOnly) return;
        
        this.nodeNameElement.readOnly = false;
        this.nodeNameElement.focus();
        this.nodeNameElement.select();
        
        // 显示编辑提示
        const hintElement = document.getElementById('name-edit-hint');
        if (hintElement) {
            hintElement.style.display = 'block';
        }
        
        // 保存节点引用和原始名称（防止在编辑过程中节点被取消选中导致currentNode变为null）
        const editingNode = this.currentNode;
        const originalName = editingNode.name;
        
        // 移除旧的事件监听器（如果存在）
        if (this._currentBlurHandler) {
            this.nodeNameElement.removeEventListener('blur', this._currentBlurHandler);
        }
        if (this._currentKeyHandler) {
            this.nodeNameElement.removeEventListener('keydown', this._currentKeyHandler);
        }
        
        // 防止重复保存的标志
        let isSaving = false;
        
        // 失焦或回车时保存
        const saveEdit = () => {
            // 防止重复执行（Enter后会触发blur，导致执行两次）
            if (isSaving) return;
            isSaving = true;
            
            // 立即移除事件监听器，防止重复触发
            if (this._currentBlurHandler) {
                this.nodeNameElement.removeEventListener('blur', this._currentBlurHandler);
            }
            if (this._currentKeyHandler) {
                this.nodeNameElement.removeEventListener('keydown', this._currentKeyHandler);
            }
            
            const newName = this.nodeNameElement.value.trim();
            
            // 隐藏提示
            if (hintElement) {
                hintElement.style.display = 'none';
            }
            
            // 检查节点是否仍然有效
            if (!editingNode) {
                console.warn('⚠️ 编辑的节点已失效');
                this.nodeNameElement.readOnly = true;
                this._currentBlurHandler = null;
                this._currentKeyHandler = null;
                return;
            }
            
            if (newName && newName !== originalName) {
                // 名称有效且已更改
                editingNode.name = newName;
                
                // 同步更新 Three.js 对象的名称
                if (editingNode.object3D) {
                    editingNode.object3D.name = newName;
                }
                
                // 刷新场景树UI
                if (this.sceneTreeUI) {
                    this.sceneTreeUI.render();
                    this.sceneTreeUI.notifyTreeChanged();
                }
                
                // 显示成功提示
                if (window.showMessage) {
                    window.showMessage(`节点已重命名为 "${newName}"`, 'success');
                }
            } else if (!newName) {
                // 名称为空，恢复原名称
                this.nodeNameElement.value = originalName;
                if (window.showMessage) {
                    window.showMessage('节点名称不能为空', 'warning');
                }
            } else {
                // 名称未更改
                this.nodeNameElement.value = originalName;
            }
            
            this.nodeNameElement.readOnly = true;
            
            // 清除事件监听器引用
            this._currentBlurHandler = null;
            this._currentKeyHandler = null;
        };
        
        // 取消编辑
        const cancelEdit = () => {
            // 立即移除事件监听器
            if (this._currentBlurHandler) {
                this.nodeNameElement.removeEventListener('blur', this._currentBlurHandler);
            }
            if (this._currentKeyHandler) {
                this.nodeNameElement.removeEventListener('keydown', this._currentKeyHandler);
            }
            
            this.nodeNameElement.value = originalName;
            this.nodeNameElement.readOnly = true;
            
            // 隐藏提示
            if (hintElement) {
                hintElement.style.display = 'none';
            }
            
            // 清除事件监听器引用
            this._currentBlurHandler = null;
            this._currentKeyHandler = null;
        };
        
        // 绑定事件（使用箭头函数避免this问题）
        this._currentBlurHandler = () => saveEdit();
        this._currentKeyHandler = (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                saveEdit();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                cancelEdit();
            }
        };
        
        this.nodeNameElement.addEventListener('blur', this._currentBlurHandler);
        this.nodeNameElement.addEventListener('keydown', this._currentKeyHandler);
    }
    
    /**
     * 处理重命名按钮点击
     */
    onRenameNode() {
        this.enableNameEdit();
    }
    
    /**
     * 处理显示/隐藏按钮点击
     */
    onToggleVisibility() {
        if (!this.currentNode) return;
        
        this.currentNode.toggleVisible();
        
        // 更新标题栏按钮图标
        if (this.nodeVisibleBtn) {
            this.nodeVisibleBtn.textContent = this.currentNode.visible ? '👁' : '👁‍🗨';
            this.nodeVisibleBtn.title = this.currentNode.visible ? '隐藏' : '显示';
        }
        
        // 更新主按钮图标和文本
        if (this.nodeVisibleBtnMain) {
            const icon = this.nodeVisibleBtnMain.querySelector('.btn-icon');
            const label = this.nodeVisibleBtnMain.querySelector('.btn-label');
            if (icon) icon.textContent = this.currentNode.visible ? '👁' : '👁‍🗨';
            if (label) label.textContent = this.currentNode.visible ? '可见性' : '已隐藏';
            this.nodeVisibleBtnMain.title = this.currentNode.visible ? '隐藏' : '显示';
        }
        
        // 刷新场景树UI
        if (this.sceneTreeUI) {
            this.sceneTreeUI.render();
            this.sceneTreeUI.notifyTreeChanged();
        }
    }
    
    /**
     * 处理删除按钮点击
     */
    async onDeleteNode() {
        if (!this.currentNode || this.currentNode.id === 'root') return;
        
        // ✨ 环境节点不能删除
        if (this.currentNode.id === 'environment' || this.currentNode.type === 'environment') {
            alert('⚠️ 环境节点是系统节点，不能被删除');
            return;
        }
        
        const node = this.currentNode;
        
        // 使用SceneTreeUI的确认对话框
        if (this.sceneTreeUI) {
            this.sceneTreeUI.deleteNode(node.id);
        } else {
            // 降级方案：使用原生确认框
            if (confirm(`确定要删除节点 "${node.name}" 及其所有子节点吗？`)) {
                // 获取当前场景ID
                const manager = window._sceneManager;
                const currentSceneId = manager ? manager.getCurrentSceneName() : null;
                
                // 如果节点有关联的模型ID，需要更新模型的引用列表
                if (node.modelId && currentSceneId && window.updateModelNodeReferences) {
                    window.updateModelNodeReferences(node.modelId, currentSceneId, node.id, 'remove', node.modelType);
                }
                
                // 递归清理所有子节点的模型引用
                if (currentSceneId) {
                    node.traverse((childNode) => {
                        if (childNode.modelId && childNode.id !== node.id && window.updateModelNodeReferences) {
                            window.updateModelNodeReferences(childNode.modelId, currentSceneId, childNode.id, 'remove', childNode.modelType);
                        }
                    });
                }
                
                if (this.treeManager) {
                    await this.treeManager.removeNode(node.id);
                }
                
                if (this.sceneTreeUI) {
                    this.sceneTreeUI.render();
                    this.sceneTreeUI.notifyTreeChanged();
                }
                
                // 隐藏面板
                this.hide();
            }
        }
    }
    
    /**
     * 通过Three.js对象查找对应的场景树节点
     */
    findNodeByObject(object) {
        if (!this.treeManager || !object) return null;
        
        // 递归查找节点
        const findNode = (node) => {
            if (node.object3D === object) {
                return node;
            }
            if (node.children && node.children.length > 0) {
                for (const child of node.children) {
                    const found = findNode(child);
                    if (found) return found;
                }
            }
            return null;
        };
        
        return findNode(this.treeManager.root);
    }
    
    /**
     * 移除mesh使用的材质引用
     */
    async removeMaterialUsageForMesh(material, sceneId, nodeId, meshUuid) {
        if (!material || !material.userData) return;
        
        const materialId = material.userData.materialId;
        if (!materialId) return;
        
        // 调用MaterialEditorPanel的removeMaterialUsage方法
        if (window.materialEditorPanel && window.materialEditorPanel.removeMaterialUsage) {
            await window.materialEditorPanel.removeMaterialUsage(materialId, sceneId, nodeId, meshUuid);
            console.log(`   🔄 [Transform Panel] 移除材质引用: ${materialId} (mesh: ${meshUuid})`);
        }
    }
}

// 全局Transform面板实例
let transformPanelInstance = null;

/**
 * 获取Transform面板实例
 */
export function getTransformPanel() {
    if (!transformPanelInstance) {
        transformPanelInstance = new TransformPanel();
    }
    return transformPanelInstance;
}

/**
 * 重置Transform（全局函数，供HTML调用）
 */
window.resetTransform = function() {
    const panel = getTransformPanel();
    panel.reset();
};

